<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="/mi/css/order/order_detail.css">
    <link rel="stylesheet" type="text/css" href="/mi/css/common/center_person.css">
    <link rel="stylesheet" href="/mi/css/common/page_bottom.css">
    <link rel="stylesheet" href="/mi/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="/mi/plugins/layui-v2.6.8/layui/css/layui.css">
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon"/>
</head>
<body>
<%@include file="../common/header.jsp" %>
<!-- 个人中心导航栏 -->
<div class="breadcrumbs">
    <div class="container">
        <div class="xiaomi-con" style="width: 100px;height: 60px">
            <a href="#">首页</a>
            <span>/订单详情</span>
        </div>
    </div>
</div>
<!-- 中心大部分, 划分为两个大部分 -->
<div class="mi-orderview page-main">
    <div class="container">
        <div class="row">
            <!-- 1. 左侧导航栏 -->
            <div class="span4">
                <div class="J_userMenu">
                    <div class="menu-box">
                        <h3>订单中心</h3>
                        <ul>
                            <li><a  href="/mi/order/order_load">我的订单</a></li>
                            <li><a href="">评价晒单</a></li>
                            <li><a href="">以旧换新订单</a></li>
                        </ul>
                    </div>
                    <div class="menu-box">
                        <h3>个人中心</h3>
                        <ul>
                            <li><a href="/mi/personal_center/portal">我的个人中心</a></li>
                            <li><a href="">消息通知</a></li>
                            <li><a href="/mi/personal_center/likes">喜欢的商品</a></li>
                            <li><a href="">收货地址</a></li>
                        </ul>
                    </div>
                    <div class="menu-box">
                        <h3>售后服务</h3>
                        <ul>
                            <li><a href="">服务记录</a></li>
                            <li><a href="">申请服务</a></li>
                        </ul>
                    </div>
                    <div class="menu-box">
                        <h3>账户管理</h3>
                        <ul>
                            <li><a href="/mi/personal_center/personal_info">个人信息</a></li>
                            <li><a href="/mi/personal_center/personal_login">修改密码</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 2. 右侧将展示不同的信息表, 根据用户点击的跳转链接(我的订单) -->
            <div class="span16">
                <div class="uc-box">

                    <div class="box-hd">
                        <!-- 订单详情标题部分 -->
                        <h1 class="title">
                            订单详情
                            <small>
                                请谨防钓鱼链接或诈骗电话，了解更多>
                                <a href="">了解更多</a>
                            </small>
                        </h1>
                        <div class="more">
                            <h2 class="subtitle">订单号：${orders.orderNumber}</h2>

                            <!-- 联系客服 - 取消订单 - 立即付款 -->
                            <div class="actions">
                                <a href="" class="btn btn-small btn-primary btn-line-gray btn-contract">联系客服</a>
                                <a href="javascript:del(${orders.orderId})"
                                       class="btn btn-small btn-primary btn-line-gray" <c:if test="${orders.orderStatus==1 || orders.orderStatus==2 }">style="display: block"</c:if><c:if test="${orders.orderStatus!=1}">style="display: none"</c:if>>取消订单</a>
                                <a href="javascript:del(${orders.orderId})"
                                   class="btn btn-small btn-primary btn-line-gray" <c:if test="${orders.orderStatus==4 || orders.orderStatus==3}">style="display: block"</c:if><c:if test="${orders.orderStatus==1 || orders.orderStatus==2}">style="display: none"</c:if>>申请售后</a>
                                <a href="" class="btn btn-small btn-primary" <c:if test="${orders.orderStatus==1}">style="display: block"</c:if><c:if test="${orders.orderStatus!=1}">style="display: none"</c:if>>立即付款</a>
                            </div>
                        </div>
                    </div>


                    <div class="box-bd">

                        <!-- 订单商品上半部分 -->
                        <div class="order_detail">
                            <!-- 等待付款部分 -->
                            <div class="order-summary">
                                <div class="order-status" <c:if test="${orders.orderStatus==1}">style="display: block"</c:if><c:if test="${orders.orderStatus!=1}">style="display: none"</c:if>>
                                    等待付款
                                </div>
                                <div class="order-status" <c:if test="${orders.orderStatus==2}">style="display: block;color: #9d9d9d;"</c:if><c:if test="${orders.orderStatus!=2}">style="display: none"</c:if>>
                                    等待收货
                                </div>
                                <div class="order-status" <c:if test="${orders.orderStatus==3}">style="display: block;color: #9d9d9d;"</c:if><c:if test="${orders.orderStatus!=3}">style="display: none"</c:if>>
                                    订单已删除
                                </div>
                                <div class="order-progress">
                                    <ol class="progress-list">
                                        <li class="step <c:if test="${orders.orderStatus==1}">step-active</c:if><c:if test="${orders.orderStatus!=1}">step-active1</c:if> step-first">
                                            下单
                                            <div class="info">${orders.createTime}</div>
                                        </li>
                                        <li class="step <c:if test="${orders.orderStatus!=1}">step-active1</c:if>">付款</li>
                                        <li class="step <c:if test="${orders.orderStatus==2}">step-active </c:if> <c:if test="${orders.orderStatus==4 || orders.orderStatus==3 }">step-active1 </c:if>">配货</li>
                                        <li class="step <c:if test="${orders.orderStatus!=1&&orders.orderStatus!=2}">step-active1 </c:if>">出库</li>
                                        <li class="step <c:if test="${orders.orderStatus!=1&&orders.orderStatus!=2}">step-active </c:if>">交易成功</li>
                                    </ol>
                                </div>
                            </div>

                            <!-- 订单商品部分 -->
                            <div class="order-goods">
                                <table class="goods-table">
                                    <c:forEach items="${orderdetailList}" var="everyod" varStatus="od">
                                        <tr class="goods-box">

                                            <td class="col col-thumb">
                                                <a href="" style="display: block;width: 80px; height: 80px;">
                                                    <img src="${everyod.picImg}"
                                                         alt=width="80px" height="80px">
                                                </a>
                                            </td>
                                            <td class="col col-info">
                                                    ${everyod.productSpecName}
                                            </td>
                                            <td class="col col-info">
                                                    ${everyod.price}元x ${everyod.buyNumber}
                                            </td>

                                        </tr>
                                    </c:forEach>
                                </table>
                            </div>
                        </div>


                        <!-- 下半部分(收货地址)  -->
                        <div class="order-detail-info">
                            <h3>收货信息</h3>
                            <table class="info-table">
                                <tr>
                                    <th>姓 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</th>
                                    <td> ${user.userName}</td>
                                </tr>
                                <tr>
                                    <th>联系电话：</th>
                                    <td> ${user.userTelephone}</td>
                                </tr>
                                <tr>
                                    <th>收货地址：</th>
                                    <td>${address.userAddress}</td>
                                </tr>
                            </table>
                        </div>
                        <!-- 支付方式 -->
                        <div class="order-detail-info">
                            <h3>支付方式</h3>
                            <table class="info-table">
                                <tr>
                                    <th>支付方式: &nbsp;</th>
                                    <td>在线支付</td>
                                </tr>
                            </table>
                        </div>
                        <!-- 发票信息 -->
                        <div class="order-detail-info">
                            <h3>发票信息</h3>
                            <table class="info-table">
                                <tr>
                                    <th>发票类型: &nbsp;</th>
                                    <td>电子普通发票</td>
                                </tr>
                                <tr>
                                    <th>发票内容: &nbsp;</th>
                                    <td>购买商品明细</td>
                                </tr>
                                <tr>
                                    <th>发票抬头: &nbsp;</th>
                                    <td>个人</td>
                                </tr>
                            </table>
                        </div>


                        <!-- 结算部分 -->
                        <div class="order-detail-total">
                            <table class="total-table">
                                <tr>
                                    <th>商品总价:</th>
                                    <td>
                                            <span class="num">
                                                ${orders.orderAmount}
                                            </span>
                                        元
                                    </td>
                                </tr>
                                <tr>
                                    <th>运费:</th>
                                    <td>
                                            <span class="num">
                                                ${orders.shipmentAmount}
                                            </span>
                                        元
                                    </td>
                                </tr>
                                <tr>
                                    <th class="total">
                                        应付金额
                                    </th>
                                    <td class="total">
                                        <span class="num">${orders.payAmount}</span>
                                        元
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<!-- 底部公共部分 -->
<%@include file="../common/page-bottom.jsp" %>
<script type="text/javascript" src="/mi/plugins/jquery/jquery.min.js"></script>
<script src="/mi/plugins/layui-v2.6.8/layui/layui.js"></script>
<script>
    function del(orderId) {
        layer.confirm('您真的要取消此订单吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){

            layer.load(3);
            $.post("/mi/order/del", {orderId:orderId}, function (res) {
                if (res.code == '200') {
                    layer.closeAll();
                    layer.msg('删除成功', {icon: 1},function () {
                        window.location='/mi/order/order_load';
                    });
                } else {
                    layer.msg(res.msg());
                }
            })

        });


    }
</script>
</body>
</html>